<template>
  <div @mouseover="now()" style="width:100%;height:100%">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  methods: {
    now: function () {
				var canvas = document.getElementById("canvas");
				var ctx = canvas.getContext("2d");
				
				var winWidth = window.innerWidth;
				var winHeight = window.innerHeight;
				canvas.width = winWidth;
				canvas.height = winHeight;
				var mousedown =false;
				var number = 3000;
				var flowers = [];
				for (var i = 0; i < number; i++) {
				flowers.push(
				{
					x: Math.random()*winWidth,
					y: Math.random()*winHeight,
					r: Math.random()*3+1,
					d: Math.random()
				});
				}
				
				window.requestAnimFrame = (function(){
					return  window.requestAnimationFrame       || 
					window.webkitRequestAnimationFrame || 
					window.mozRequestAnimationFrame    || 
					window.oRequestAnimationFrame      || 
					window.msRequestAnimationFrame     || 
					function( callback ){
					window.setTimeout(callback, 1000 / 60);
				};
				})();
				
				function draw1()
				{
					ctx.clearRect(0, 0, winWidth, winHeight);
					ctx.fillStyle = "pink";
					ctx.beginPath();
					for(var i = 0; i < number; i++)
					{
						var p = flowers[i];
						ctx.moveTo(p.x, p.y);
						ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
					}
					ctx.fill();
					update1();
				}
				
				var angle = 0;
				
				function update1()
				{
					angle += 0.01;
					for(var i = 0; i < number; i++)
					{
						var p = flowers[i];
						p.y += Math.cos(angle+p.d) + p.r/2;
						if (i%10==0) {
							p.x += Math.sin(angle) * 2;
						}
					
						if (p.y > winHeight) {
							flowers[i] = {x: p.x, y: 0, r: p.r, d: p.d}
						}
					}
				}
				
				
				function draw2()
				{
				ctx.clearRect(0, 0, winWidth, winHeight);
				ctx.fillStyle = "pink";
				ctx.beginPath();
				for(var i = 0; i < number; i++)
				{
				var p = flowers[i];
				ctx.moveTo(p.x, p.y);
				ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
				}
				ctx.fill();
				update2();
				}
				var ch = winHeight/2;
				
				var h = 0;
				function update2()
				{
					h = 0.01;
					update1();
					for(var i = 0; i < number; i++)
					{
						var p = flowers[i];
						var dl = Math.sqrt(Math.pow( winWidth/2-p.x, 2 ) + Math.pow( winHeight/2-p.y, 2 ));
						var a = Math.asin((winHeight/2-p.y)/dl);
						if(p.x<winWidth/2)
						{
							a = Math.PI-a;
						}
						if ((dl<ch&&dl>7*ch/8)||(dl<6*ch/8&&dl>5*ch/8)||(dl<ch*4/8&&dl>3*ch/8)||(dl<2*ch/8&&dl>ch/8)) {
							flowers[i]={x: winWidth/2+Math.cos(a+h)*dl, y:winHeight/2-Math.sin(a+h)*dl , r: p.r, d: p.d};
						}
						if ((dl>6*ch/8&&dl<7*ch/8)||(dl<5*ch/8&&dl>4*ch/8)||(dl<ch*3/8&&dl>2*ch/8)||(dl<ch/8)) {
							flowers[i]={x: winWidth/2+Math.cos(a-h)*dl, y:winHeight/2-Math.sin(a-h)*dl , r: p.r, d: p.d};
						}
					}
				}
				
				function draw3()
				{
					if (mousedown==true) {
						requestAnimationFrame(draw2);
					}
					else
					{
						h = 0;
						requestAnimationFrame(draw1);
					}
					requestAnimationFrame(draw3);
				}
				canvas.addEventListener("mouseup",function(){
					mousedown = false;
				});
				
				canvas.addEventListener("mousedown",function(){
					mousedown = true;
				});
				
				requestAnimationFrame(draw3);
    }
  }
}
</script>
